window.onload = function () {
  const imgContainer = document.getElementsByClassName("image-list")[0];
  var imgs = imgContainer.getElementsByTagName("img");
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  var btn = document.getElementById("btn");
  var base64Img = document.getElementById("base64Img");
  var base64 = "";
  const data = [
    {
      url: "./imgs/1.jpg",
      width: 500,
      height: 500,
    },
  ];

  const scaleSlider = document.getElementById("scaleSlider"),
    scaleOurput = document.getElementById("scaleOutput");
  let scale = 1.0;
  const min_scale = 1.0;
  const max_scale = 3.0;

  const image = new Image();

  function drawImage() {
    const w = canvas.width,
      h = canvas.height,
      sw = scale * w,
      sh = scale * h;
    context.clearRect(0, 0, w, h);
    context.drawImage(image, w / 2 - sw / 2, h / 2 - sh / 2, sw, sh);
  }
  function drawScaleText(value) {
    const text = parseFloat(value).toFixed(2);

    scaleOurput.innerText = text;
  }
  image.src = data[0].url;
  image.onload = function () {
    drawImage();
  };
  scaleSlider.onchange = function (e) {
    scale = e.target.value;

    drawScaleText(scale);
    drawImage();
  };
};
